body {
    background-color: #f2f2f2;
}
.layout {
    margin-top: 84/37.5rem;
    margin-bottom: 120/37.5rem;
    .header {
        width: 100%;
        height: 84/37.5rem;
        background-color: #141414;
        position: fixed;
        top: 0;
        left: 0;
        .swiperIcon {
            float: left;
            width: 45/37.5rem;
            height: 84/37.5rem;
            margin-left: 30/37.5rem;
            background: url("../../img/saoma@3x.png") no-repeat center center;
            background-size: 45/37.5rem 41/37.5rem;
        }
        .searchInput {
            float: left;width: 540/37.5rem;
            height: 64/37.5rem;
            border-radius: 15px;
            margin: 10/37.5rem 0 0 30/37.5rem;
            color: #808080;
            font-size: 28/37.5rem;
            line-height: 64/37.5rem;
            padding-left: 73/37.5rem;
            background: url("../../img/sou.png") #1e1e1e no-repeat 23/37.5rem center;
            background-size: 33/37.5rem 33/37.5rem;
            box-sizing: border-box;
        }
        .msgIcon {
            float: right;
            width: 48/37.5rem;
            height: 84/37.5rem;
            margin-right: 30/37.5rem;
            background: url("../../img/massage@3x.png") no-repeat center center;
            background-size: 48/37.5rem 49/37.5rem;
        }
    }
    .customZone {
        width: 100%;
        padding: 20/37.5rem;
        margin-bottom: 20/37.5rem;
        box-sizing: border-box;
        img {
            display: block;
            width: 100%;
            height: 100%;
        }
    }
    .themeBox {
        width: 100%;
        background-color: #f2f2f2;
        .themeItem {
            width: 100%;
            padding: 20/37.5rem;
            background-color: #fff;
            margin-bottom: 20/37.5rem;
            box-sizing: border-box;
            .themePic {
                width: 100%;
                height: 280/37.5rem;
                img {
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            }
            .themeProductlist {
                margin-top: 10/37.5rem;
                box-sizing: border-box;
                .themeProItem {
                    float: left;
                    width: 230/37.5rem;
                    margin-right: 10/37.5rem;
                    .tpiPic {
                        width: 230/37.5rem;
                        height: 230/37.5rem;
                        img {
                            width: 100%;
                            height: 100%;
                            display: block;
                        }
                    }
                    .productMsg {
                        .brandName {
                            font-size: 20/37.5rem;
                            color: #808080;
                            text-align: center;
                            margin-top: 10/37.5rem;
                        }
                        .productName {
                            font-size: 24/37.5rem;
                            color: #141414;
                            font-weight: 700;
                            text-align: center;
                            margin-top: 12/37.5rem;
                            padding: 0 10/37.5rem;
                            box-sizing: border-box;
                            overflow:hidden; 
                            text-overflow:ellipsis;
                            display:-webkit-box; 
                            -webkit-box-orient:vertical;
                            -moz-box-orient:vertical;
                            -webkit-line-clamp:1;
                        }
                        .price {
                            font-size: 26/37.5rem;
                            color: #333;
                            font-weight: 700;
                            text-align: center;
                            margin-top: 20/37.5rem;
                            margin-bottom: 15/37.5rem;
                        }
                    }
                }
                .themeProItem:nth-of-type(3n) {
                    margin-right: 0;
                }
            }
        }
    }
    .contenBox {
        width: 100%;
        background-color: #f2f2f2;
        .contentItem {
            padding: 39/37.5rem 20/37.5rem 0 20/37.5rem; 
            background-color: #fff;
            margin-bottom: 20/37.5rem;
            box-sizing: border-box;
            .contentTitle {
                h2 {
                    box-sizing: border-box;
                    font-size: 36/37.5rem;
                    margin-bottom: 26/37.5rem;
                    overflow:hidden; 
                    text-overflow:ellipsis;
                    display:-webkit-box; 
                    -webkit-box-orient:vertical;
                    -webkit-line-clamp:2;
                }
            }
            .contentText {
                font-size: 26/37.5rem;
                color: #a3a3a3;
                margin-bottom: 30/37.5rem;
            }
            .contentPic {
                width: 100%;
                img {
                    display: block;
                    width: 100%;
                }
            }
            .tagAndThumb {
                width: 100%;
                height: 80/37.5rem;
                .tag {
                    float: left;
                    height: 44/37.5rem;
                    line-height: 44/37.5rem;
                    text-align: center;
                    font-size: 22/37.5rem;
                    color: #ffa31a;
                    background-color: #faedaa;
                    border-radius: 15px;
                    padding: 0 23/37.5rem;
                    margin-top: 22/37.5rem;
                    margin-right: 15/37.5rem;
                }
                .thumb {
                    float: right;
                    height: 80/37.5rem;
                    line-height: 80/37.5rem;
                    font-size: 24/37.5rem;
                    color: #a3a3a3;
                }
            }
        }
    }
    .like {
        padding: 0 20/37.5rem;
        background-color: #f2f2f2;
        box-sizing: border-box;
        .likeIcon {
            width: 170/37.5rem;
            height: 35/37.5rem;
            margin: 42/37.5rem auto 22/37.5rem auto;
            background: url("../../img/guess@3x.png") no-repeat center center;
            background-size: 168/37.5rem 33/37.5rem;
            display: none;
        }
        .likeProduct {
            .likeProductItem {
                float: left;
                width: 345/37.5rem;
                // height: 500/37.5rem;
                margin-bottom: 20/37.5rem;
                background-color: #fff;
                .likeProductPic {
                    width: 305/37.5rem;
                    height: 305/37.5rem;
                    margin: 20/37.5rem auto 0 auto;
                    img {
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                }
                .likeProductMsg {
                    .likeBrandName {
                        font-size: 22/37.5rem;
                        line-height: 30/37.5rem;
                        text-align: center;
                        margin-top: 40/37.5rem;
                    }
                    .likeProductName {
                        font-size: 24/37.5rem;
                        line-height: 30/37.5rem;
                        text-align: center;
                        margin-top: 10/37.5rem;
                    }
                    .likePrice {
                        font-size: 26/27.5rem;
                        line-height: 30/37.5rem;
                        text-align: center;
                        margin-top: 34/37.5rem;
                        margin-bottom: 30/37.5rem;
                        font-weight: 700;
                    }
                }
            }
            .likeProductItem:nth-of-type(2n) {
                margin-left: 20/37.5rem;
            }
        }
        .end {
            width: 420/37.5rem;
            margin: 0 auto;
            display: none;
            img {
                width: 100%;
            }
        }
    }
    .menu {
        width: 100%;
        height: 100/37.5rem;
        border-top: 1px solid #ebebeb;
        background-color: #fff;
        box-sizing: border-box;
        position: fixed;
        bottom: 0;
        left: 0;
        ul {
            li {
                float: left;
                width: 20%;
                height: 100/37.5rem;
                position: relative;
                a {
                    display: block;
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    color: #08090a;
                    font-size: 20/37.5rem;
                    padding-top: 60/37.5rem;
                    box-sizing: border-box;
                }
                span {
                    position: absolute;
                }
                .indexxIcon {
                    top: 10/37.5rem;
                    left: 50%;
                    margin-left: -22/37.5rem;
                    width: 44/37.5rem;
                    height: 45/37.5rem;
                    background: url("../../img/home _S@3x.png") no-repeat center center;
                    background-size: 44/37.5rem 45/37.5rem;
                }
                .classifyIcon {
                    top: 10/37.5rem;
                    left: 50%;
                    margin-left: -22/37.5rem;
                    width: 44/37.5rem;
                    height: 45/37.5rem;
                    background: url("../../img/classify_U@3x.png") no-repeat center center;
                    background-size: 44/37.5rem 45/37.5rem;
                }
                .activityIcon {
                    top: -25/37.5rem;
                    left: 50%;
                    margin-left: -39/37.5rem;
                    width: 78/37.5rem;
                    height: 78/37.5rem;
                    background: url("../../img/acticity_U@3x.png") no-repeat center center;
                    background-size: 78/37.5rem 78/37.5rem;
                }
                .carIcon {
                    top: 8/37.5rem;
                    left: 50%;
                    margin-left: -24/37.5rem;
                    width: 48/37.5rem;
                    height: 50/37.5rem;
                    background: url("../../img/M_shopping.png") no-repeat center center;
                    background-size: 48/37.5rem 50/37.5rem;
                }
                .meIcon {
                    top: 10/37.5rem;
                    left: 50%;
                    margin-left: -22/37.5rem;
                    width: 44/37.5rem;
                    height: 46/37.5rem;
                    background: url("../../img/mine_U@3x.png") no-repeat center center;
                    background-size: 44/37.5rem 45/37.5rem;
                }
            }
        }
    }
    .outTimeMarsk {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,.2);
        .outTimeBox {
            width: 630/37.5rem;
            height: 420/37.5rem;
            border-radius: 20px;
            background-color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -420/2/37.5rem;
            margin-left: -630/2/37.5rem;
            .top {
                width: 100%;
                height: 320/37.5rem;
                .outTimePic {
                    width: 140/37.5rem;
                    height: 140/37.5rem;
                    border-radius: 50%;
                    background: url("../../img/chaoshi@3x.png") no-repeat  center center;
                    background-size: 140/37.5rem 140/37.5rem;
                    position: absolute;
                    top: -140/2/37.5rem;
                    left: 50%;
                    margin-left: -140/2/37.5rem;
                }
                .outTimeTitle {
                    padding-top: 80/37.5rem;
                    margin-bottom: 45/37.5rem;
                    text-align: center;
                    font-size: 30/37.5rem;
                    color: #141414;
                    font-weight: 700;
                    box-sizing: border-box;
                }
                .outTimeText {
                    text-align: center;
                    font-size: 30/37.5rem;
                    color: #a3a3a3;
                    line-height: 42/37.5rem;
                }
            }
            .bottom {
                width: 100%;
                height: 100/37.5rem;
                border-top: 1px solid #ebebeb;
                font-size: 30/37.5rem;
                box-sizing: border-box;
                .leftBtn {
                    float: left;
                    width: 50%;
                    color: #a3a3a3;
                    border-right: 1px solid #ebebeb;
                    text-align: center;
                    line-height: 99/37.5rem;
                    box-sizing: border-box;
                }
                .rightBtn {
                    float: left;
                    width: 50%;
                    color: #ffa31a;
                    text-align: center;
                    line-height: 99/37.5rem;
                }
            }
        }
    }
}